<template>
  <div>
    <div id="map_chart" ref="map_chart"></div>
  </div>
</template>
<script>
// @ is an alias to /src
// import data from "@/assets/json/flights.json";
export default {
  data() {
    return {
      
    };
  },
  methods: {
    getAirportCoord(data,idx) {
      return [data.airports[idx][3], data.airports[idx][4]];
    },
    getJSONfnc(data) {
      let myChart = this.$echarts.init(this.$refs.map_chart);
      myChart.showLoading();
      var routes = data.routes.map((airline) => {
        return [
          this.getAirportCoord(data,airline[1]),
          this.getAirportCoord(data,airline[2]),
        ];
      });

      myChart.setOption({
        geo3D:  {
        map: "world",
        shading: "realistic",
        silent: true,
        environment: "#333",
        realisticMaterial: {
          roughness: 0.8,
          metalness: 0,
        },
        postEffect: {
          enable: true,
        },
        groundPlane: {
          show: false,
        },
        light: {
          main: {
            intensity: 1,
            alpha: 30,
          },
          ambient: {
            intensity: 0,
          },
        },
        viewControl: {
          distance: 70,
          alpha: 89,

          panMouseButton: "left",
          rotateMouseButton: "right",
        },

        itemStyle: {
          areaColor: "#000",
        },

        regionHeight: 0.5,
      },
        series: [
          {
            type: "lines3D",

            coordinateSystem: "geo3D",

            effect: {
              show: true,
              trailWidth: 1,
              trailOpacity: 0.5,
              trailLength: 0.2,
              constantSpeed: 5,
            },

            blendMode: "lighter",

            lineStyle: {
              width: 0.2,
              opacity: 0.05,
            },

            data: routes,
          },
        ],
      });

      window.addEventListener("keydown", function () {
        myChart.dispatchAction({
          type: "lines3DToggleEffect",
          seriesIndex: 0,
        });
      });
    },
  },
  mounted() {
      let _self = this;
      $.getJSON('/json/flights.json', function(data) {
          console.log(data);
        _self.getJSONfnc(data);
      })
    }
};
</script>
<style scoped>
#map_chart {
  height: 700px;
  width: 100%;
}
</style>